import React, { Component, Fragment } from 'react';
import StandardTable from '@/components/StandardTable';
import { Icon, Form, Input, Modal, Select, Row, Col, Upload, Button } from 'antd';
import { connect } from 'dva';
import reqwest from 'reqwest';
import prompt from '@/components/Prompt';

@connect(({ upkeep, loading, common }) => ({
  upkeep,
  loading: loading.models.upkeep,
}))
@Form.create()
export default class UpkeepInfo extends Component {
  componentDidMount() {}

  state = {
    id: 0,
    fileList: [],
    uploading: false,
  };

  showDetail = id => {
    const { showDetail, dispatch } = this.props;
    if (showDetail) showDetail();
    this.setState({ detailId: id });
    dispatch({
      type: 'upkeep/upkeepInfoDetail',
      payload: { id },
    });
  };

  handleUpload = () => {
    const { fileList } = this.state;
    const { urlImport, urlList, dispatch, id, handleCancel } = this.props;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('file', file);
    });

    this.setState({
      uploading: true,
    });

    reqwest({
      url: '/server/api/tms/tms-repair-detail/importRepairDetail?repairId=' + id,
      method: 'post',
      processData: false,
      data: formData,
      headers: {
        token: localStorage.getItem('token'),
      },
      contentType: 'multipart/form-data',
      success: res => {
        this.setState({
          fileList: [],
          uploading: false,
        });
        handleCancel();
        // console.log('上传成功.', 'id', id, res);
        prompt({ content: '上传成功' });
        dispatch({
          type: 'repair/repairInfoList',
          payload: { id },
        });
        dispatch({
          type: 'repair/repairDetail',
          payload: { id },
          // callback: attachments => {
          //   attachments && this.setFileList(attachments);
          // },
        });
      },
      error: () => {
        this.setState({
          uploading: false,
        });
        prompt({ content: '上传失败' });
      },
    });
  };

  render() {
    const {
      loading,
      change,
      visibleFile,
      handleCancel,
      form: { getFieldDecorator },
      id,
    } = this.props;

    const { uploading, fileList } = this.state;
    const propsFile = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <Fragment>
        {visibleFile && (
          <Modal
            title="导入明细"
            visible={visibleFile}
            onOk={this.handleUpload}
            onCancel={handleCancel}
            width={620}
            style={{ top: 20 }}
            destroyOnClose={true}
          >
            <div style={{ marginBottom: 16 }}>
              <a
                // href="http://56.hichain.com/attachment/维修明细导入模板.xlsx"
                href={`http://${window.location.host}/attachment/维修明细导入模板.xlsx`}
                download
              >
                下载模板
              </a>
            </div>
            <Upload {...propsFile}>
              <Button>
                <Icon type="upload" /> 附件
              </Button>
            </Upload>
          </Modal>
        )}
      </Fragment>
    );
  }
}
